<!DOCTYPE html>
<html lang="en">
    <head>
        <base href="../">
        <meta charset="utf-8">
        <title>发送消息</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <!-- <link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" media="all">
        <link rel="stylesheet" href="../css/public.css" media="all"> -->
        <link rel="stylesheet" href="css/layui.css">
        <style>
            tip {
                font-size: 2px;
                color:#777b6c;
                font-style:italic;
            }
            .layui-container {
                margin-top: 31px;
            }
        </style>
    </head>
<body>
    <div class="layui-container">
        <div class="layui-form layui-form-pane" id="sendForm">
        <div class="layui-form-item">
            <label class="layui-form-label" required>任务名称</label>
            <div class="layui-input-inline">
                <input type="text" name="title"  required lay-verify="required" lay-reqtext="任务名称不能为空"  placeholder="请输入任务名称" autocomplete="off" class="layui-input">
                <tip>后台查看时方便作出区分</tip>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">定时发送</label>
            <div class="layui-input-block">
                <input type="checkbox"  name="use_timer" lay-skin="switch" value="true" lay-filter="switchTest" lay-text="打开|关闭">
            </div>
            <tip>关闭即为立即发送</tip>
        </div>
        <div class="layui-form-item" hidden="true" id="time_day_div"> 
            <label class="layui-form-label">日期</label>
            <div class="layui-input-inline">
                <input type="text"  id="time_day" name="time_day" placeholder="请选择日期" autocomplete="off" class="layui-input">
                <tip>日期和周任选一个即可</tip>
            </div>
            
        </div>
        <div class="layui-form-item" hidden="true" id="time_week"> 
            <label class="layui-form-label">每周</label>
            <div class="layui-input-block">
                <input type="checkbox" name="week" value="0" title="周一" >
                <input type="checkbox" name="week" value="1" title="周二"> 
                <input type="checkbox" name="week" value="2" title="周三" > 
                <input type="checkbox" name="week" value="3" title="周四" > 
                <input type="checkbox" name="week" value="4" title="周五" > 
                <input type="checkbox" name="week" value="5" title="周六" > 
                <input type="checkbox" name="week" value="6" title="周日" > 
            </div>
        </div>
        <div class="layui-form-item" hidden="true" id="time_div" > 
            <label class="layui-form-label">时间</label>
            <div class="layui-input-inline">
                <input type="text"  id="time" name="time" placeholder="请选择时间" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">发送对象</label>
            <div class="layui-input-block">
                <input type="text" id="send_to_who" name="send_to_who" placeholder="选择发送对象" autocomplete="off" class="layui-input">
                <tip>发送对象和班级选择一个即可</tip>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">发送班级</label>
            <div class="layui-input-block">
                <input type="text" id="send_to_classes" name="send_to_classes" placeholder="选择发送班级" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">附件</label>
            <div class="layui-input-block">
                <input type="text"  id="sfiles" name="files" placeholder="添加附件" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">文本</label>
            <div class="layui-input-block">
                <textarea name="text_content"   placeholder="请输入文本内容" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="sendMsg">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
            
        </div>
    </div>
    <script src="layui.js" charset="utf-8"></script>
    <script src="js/lay-module/tableSelect/tableSelect.js" charset="utf-8"></script>
    <script src="js/axios.min.js" charset="utf-8"></script>

    <script type="text/javascript">
        layui.use(['tableSelect','form', 'layedit', 'laydate','element'],function(){
            var tableSelect = layui.tableSelect;
            var form = layui.form
            , layer = layui.layer
            , layedit = layui.layedit
            , laydate = layui.laydate
            , element = layui.element
            , $ = layui.$;
            
            // element.init();
            // form.render();
            console.log("form",form);
            // layer.msg("hello");
            //附件 多条件搜索
            tableSelect.render({
                elem: '#sfiles',
                checkedKey: 'fileID',
                searchType: 'more', //开启多条件搜索
                searchList: [
                    {searchKey: 'userFileName', searchPlaceholder: '搜索文件名'}, //搜索条件1
                    {searchKey: 'beizhu', searchPlaceholder: '搜索备注'},  //搜索条件2
                ],
                table: {
                    url: '/fileLib',
                    cols: [[
                        { type: 'checkbox' },
                        { field: 'fileID', title: 'ID' },
                        { field: 'userFileName', title: '文件名' },
                        { field: 'datetime', title: '上传日期' },
                        { field: 'beizhu', title: '备注' }
                    ]]
                },
                done: function (elem, data) {
                //选择完后的回调，包含2个返回值 elem:返回之前input对象；data:表格返回的选中的数据 []
                //拿到data[]后 就按照业务需求做想做的事情啦~比如加个隐藏域放ID...
                    console.log("elem",elem);
                    console.log("data",data);

                    elem[0].value = "";

                    for (var i=0; i<data.data.length; ++i){
                        elem[0].value += ""+data.data[i].fileID;
                        if (i != data.data.length-1) elem[0].value += ", ";
                    }
                }
            })
            //发送对象 多条件搜索
            tableSelect.render({
                elem: '#send_to_who',
                checkedKey: 'uid',
                searchType: 'more', //开启多条件搜索
                searchList: [
                    {searchKey: 'name', searchPlaceholder: '查找名字'}, //搜索条件1
                    {searchKey: 'banji', searchPlaceholder: '查找班级'}, //搜索条件1
                    {searchKey: 'beizhu', searchPlaceholder: '搜索备注'},  //搜索条件2
                ],
                table: {
                    url: '/studentData',
                    cols: [[
                        { type: 'checkbox' },
                        { field: 'uid', title: '学号' },
                        { field: 'name', title: '姓名' },
                        { field: 'banji', title: '班级' },
                        { field: 'beizhu', title: '备注' }
                    ]]
                },
                done: function (elem, data) {
                //选择完后的回调，包含2个返回值 elem:返回之前input对象；data:表格返回的选中的数据 []
                //拿到data[]后 就按照业务需求做想做的事情啦~比如加个隐藏域放ID...
                    console.log("elem",elem);
                    console.log("data",data);

                    elem[0].value = "";

                    for (var i=0; i<data.data.length; ++i){
                        elem[0].value += ""+data.data[i].uid;
                        if (i != data.data.length-1) elem[0].value += ", ";
                    }
                }
            })
            //发送班级 多条件搜索
            tableSelect.render({
                elem: '#send_to_classes',
                checkedKey: 'classesID',
                searchType: 'more', //开启多条件搜索
                searchList: [
                    {searchKey: 'classesID', searchPlaceholder: '搜索班级ID'}, //搜索条件1
                    {searchKey: 'beizhu', searchPlaceholder: '搜索备注'},  //搜索条件2
                ],
                table: {
                    url: '/classesData',
                    cols: [[
                        { type: 'checkbox' },
                        { field: 'classesID', title: '班级ID' },
                        { field: 'mainGroup', title: '主群' },
                        { field: 'beizhu', title: '备注' }
                    ]]
                },
                done: function (elem, data) {
                //选择完后的回调，包含2个返回值 elem:返回之前input对象；data:表格返回的选中的数据 []
                //拿到data[]后 就按照业务需求做想做的事情啦~比如加个隐藏域放ID...
                    console.log("elem",elem);
                    console.log("data",data);

                    elem[0].value = "";

                    for (var i=0; i<data.data.length; ++i){
                        elem[0].value += ""+data.data[i].classesID;
                        if (i != data.data.length-1) elem[0].value += ", ";
                    }
                }
            })
                //监听指定开关
            form.on('switch(switchTest)', function (data) {
                console.log(data);
                // layer.msg('开关checked：' + (this.checked ? 'true' : 'false'), {
                //     offset: '6px'
                // });
                if (this.checked) {
                    document.getElementById("time_day_div").hidden=false;
                    document.getElementById("time_week").hidden=false;
                    document.getElementById("time_div").hidden=false;
                } else {
                    document.getElementById("time_day_div").hidden=true;
                    document.getElementById("time_week").hidden=true;
                    document.getElementById("time_div").hidden=true;
                }

                // layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF', data.othis)
            });

            // 日期选择
            laydate.render({
                elem: "#time_day",
                type: "date",
                theme: 'grid',
                calendar: true,
                // trigger: 'click',
                mark: {

                },
                done: function(value, date, endDate){
                    console.log(value); //得到日期生成的值，如：2017-08-18
                    console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
                    console.log(endDate); //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
                }
            });
            // 时间选择
            laydate.render({
                elem: "#time",
                type: "time",
                theme: 'grid'
            });

            function parseArr2Int(arr){
                var n_arr = [];
                for (var i in arr){
                    n_arr.push(parseInt(arr[i]));
                }
                return n_arr;
            }

            form.on("submit(sendMsg)", function(data){
                var postData = data.field;
                postData["use_timer"] = postData["use_timer"]=="true"?true:false;
                postData["send_to_who"] = postData["send_to_who"]?parseArr2Int(postData["send_to_who"].split(',')):[];
                postData["send_to_classes"] = postData["send_to_classes"]?parseArr2Int(postData["send_to_classes"].split(',')):[];
                postData["files"] = postData["files"]?parseArr2Int(postData["files"].split(',')):[];
                
                var arr_box = [];
                $('input[name=week]:checked').each(function() {
                    arr_box.push(parseInt($(this).val()));
                });
                postData["week"] = arr_box;
                console.log("submit data ", postData);
                if (postData["send_to_who"].length==0 && postData["send_to_classes"].length==0) {layer.msg("请选择一个发送对象,发送班级或发送私聊对象!",{icon:2});return false;}
                if (postData["use_timer"] && (!postData["time_day"] && postData["week"].length==0)) {layer.msg("请选择日期或周!",{icon:2});return false;}
                if (postData["use_timer"] && !postData["time"]) {layer.msg("请选择发送时间!",{icon:2});return false;}
                if (postData["files"].length==0 && !postData["text_content"]) {layer.msg("请设置发送内容, 文本内容或文件!",{icon:2});return false;}
                layer.alert("确定发送?",{
                            title:"提示",
                            icon:1
                        }, function(index){
                    axios.post('/qqbot/sendMsgMulti', postData)
                        .then(function (response) {
                            console.log("response ", response);
                            
                            layer.close(index);
                            layer.msg("已加入发送队列",{icon:1});
                            setTimeout(function(){
                                location.reload();
                                }, 1500)
                        }).catch(function (error) {
                            layer.alert("添加发送队列失败!",{
                                title:"提示",
                                icon:2
                            }, function(index){
                                layer.close(index);
                            })
                    });
                        // layer.msg("添加发送队列失败!",{icon:2});
                    }); 	
                
                
            });


        });
    
    </script>

</body>
</html>